
<%-- 
  - Author: Sergey Manoylo
  - Date: 10-March-2012
  - Copyright Notice: TRAKHEES
  - Description: form.jsp
 --%>

<%@ include file="/WEB-INF/view/include.jsp"%>

<%@ include file="../noc_mappings.jsp"%>

<div class="t_tmiddle-right">
	<div id="tabs">
		<ul id="TabHeader">
			<li><a href="#MainDetails"><spring:message
						code="noc.and.letters.noc.header" /></a></li>
	        <li><a href="#Comments"><spring:message 
	        			code="header.comments" /></a></li>
			<li><a href="#Summary"><spring:message 
						code="noc.and.letters.summary.header" /></a></li>
		</ul>

		<form:form modelAttribute="nocAndLettersModel" name="nocAndLettersFrm"
			id="nocAndLettersFrm" method="POST" enctype="multipart/form-data"
			class="t_form" action="${submitUri}" >
			<spring:hasBindErrors name="nocAndLettersModel">
				<script type="text/javascript">
					$(document)
							.ready(
									function() {
										jAlert(
												'error',
												'<li><form:errors path="*" delimiter="<li>"/>',
												'<spring:message code="label.errormessage" />');
									});
				</script>
			</spring:hasBindErrors>

			<%@include file="MainTab.jsp"%>
			<%@include file="CommentsTab.jsp" %>			
			<%@include file="SummaryTab.jsp"%>
			
			<c:if test="${isResubmit}">
				<input type="hidden" name="isResubmit" value="${isResubmit}">
				<input type="hidden" name="appId" value="${appId}">
			</c:if>
			<div id="FNPPaymentInfoTab" class="t_pop_up">
				<%@include
					file="/WEB-INF/view/admin/general/payment/PaymentInfoTab.jsp"%>
			</div>
			<div id="backgroundPopup"></div>
			
			<c:choose>
				<c:when	test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
					<a id="termsAndConditionLink" href="resources/staticContents/termsAndConditions/nocAndLetters/nalTermsAndCondition_ar.jsp" style="display:none; ">terms and condition</a>
				</c:when>
				<c:otherwise>
					<a id="termsAndConditionLink" href="resources/staticContents/termsAndConditions/nocAndLetters/nalTermsAndCondition_en.jsp" style="display:none; ">terms and condition</a>
				</c:otherwise>
			</c:choose>
			
		</form:form>

	</div>
</div>
<!--Middle Right Close-->
<script>

	var $tabs;
	var submAction = null;

	//Validation - Required fields
	$().ready(
					function() {
						
						
						$("#termsAndConditionLink").fancybox({
							'width'				: '60%',
							'height'			: '30%',
					        'autoScale'     	: false,
					        'transitionIn'		: 'none',
							'transitionOut'		: 'none',
							'type'				: 'iframe',
							'modal'				:'true'
						});
						
						var checkTrmsAndCondsCookie = $.cookie('noclettersconds');
						
						if(checkTrmsAndCondsCookie == null){
							$("#termsAndConditionLink").trigger('click');
						}						

						$(".topnav")
								.accordion(
										{
											accordion : false,
											speed : 500,
											closedSign : '<img src=\'resources/images/common/close.jpg\' />',
											openedSign : '<img src=\'resources/images/common/open.jpg\' />'
										});
						
						$("#nocAndLettersFrm")
								.validate(
										{

											onfocusout : false,
											onkeyup : false,
											onclick : false,
											rules : {
												employeeId : "required",
												textFormat : "required",
												nocAndLetters : "required",
												signature : "required",
												to : "required",
												location : "required"
											},
											
											submitHandler: function (form) {
												blockPage();
												form.submit();
											},

											showErrors : function(errorMap,
													errorList) {

												var errors = '<ul>';
												var label;
												if (errorList.length) {
													$.each(errorMap, function(
															name, value) {
														label = $(
																"label[for='"
																		+ name
																		+ "']")
																.html();
														label = value + '['
																+ label + ']';
														errors = errors
																+ '<li>'
																+ label
																+ '</li>';

													});
													errors = errors + '</ul>';
													jAlert('error', errors,
															'<spring:message code="label.errormessage" />');
													return false;
												}
											}
										});// end $("#EmploymentVisaFrm").validate

						$tabs = $("#tabs").tabs();
										
						$('#TabHeader')
								.removeClass(
										'ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all');
						
						$('#TabHeader > li')
								.removeClass(
										'ui-state-default ui-corner-top ui-state-active ui-state-hover');
						
						$('#tabs').removeClass(
								'ui-widget ui-widget-content ui-corner-all');
						
						$('#tabs').tabs(
								{
									select : function(event, ui) {

										var selected = $tabs.tabs('option',
												'selected'); // => 0
										var clicked = ui.index; // => 0

										if (selected > clicked)
											return true;

										var isValid = validate();// form validation returning true or false

										if (clicked == 2) {
											updateSummaryTab();
											//updateAttachmentsTab();
										}
										return isValid;
									}
								});
						
						$('#Main-Next').click(function() {
							$tabs.tabs('select', 1);
							return false;
						});
						
						$('#Comments-Next').click(function() {			
							$tabs.tabs('select', 2);
							return false;
						});
						
						$('#Comments-Prev').click(function() {			
							$tabs.tabs('select', 0);
							return false;
						});
						
						$('#Summary-Previous').click(function() {
							$tabs.tabs('select', 1);
							return false;
						});
						
						showNocsByLang($('#textFormat').val());
						showRequiredFieldsByNocType($('#nocAndLetters').val());
						$('#nocAndLetters').change(function() {
							showRequiredFieldsByNocType($('#nocAndLetters').val());
						});
						
						$('#textFormat').change(function() {
							showNocsByLang($('#textFormat').val());
						});

						$('#strPostNo').val('Auto Generated');

						//CLOSING POPUP
						//Click the x event!
						$("#popupContactClose").click(function() {
							disablePopup();
						});
						//Click out event!
						$("#backgroundPopup").click(function() {
							disablePopup();
						});
						//Press Escape event!
						$(document).keypress(function(e) {
							if (e.keyCode == 27 && popupStatus == 1) {
								disablePopup();
							}
						});
					});
	
	function setAction(inaction){
		submAction = inaction;
		
		if(inaction =='cancel'){
			
			fancyConfirm('<spring:message code="message.cancel_confirmation_message" />'
					,'<spring:message code="button.No" />'
					,'<spring:message code="button.yes" />'
					, function(ret) {
						if(ret == true){
							//cancel
							var input = $("<input>").attr("type", "hidden").attr("name", "MainUserCancel").val("MainUserCancel");
							$('#nocAndLettersFrm').append($(input));
							$('#nocAndLettersFrm').submit();
							$.fancybox.showLoading();
						}
			});
		}
	}

	function submitForm(divId) {
		$('#nocAndLettersFrm').append($("#" + divId).html());
		var input = $("<input>").attr("type", "hidden").attr("name",
				"submitted").val("submitted");
		$('#nocAndLettersFrm').append($(input));
		$.fancybox.showLoading();
		$('#nocAndLettersFrm').submit();
	}

	function validate() {
		
		var selected = $tabs.tabs('option', 'selected'); // => 0
		
		if (selected == 0) {
			return (   $("#nocAndLettersFrm").validate().element("#employeeId")
					&& $("#nocAndLettersFrm").validate().element("#textFormat") 
					&& $("#nocAndLettersFrm").validate().element("#nocAndLetters")
					&& $("#nocAndLettersFrm").validate().element("#to")
					&& $("#nocAndLettersFrm").validate().element("#location")
					&& $("#nocAndLettersFrm").validate().element("#signature")
					&& $("#nocAndLettersFrm").validate().element("#country")
					&& $("#nocAndLettersFrm").validate().element("#period")
					&& $("#nocAndLettersFrm").validate().element("#lostText")
					&& $("#nocAndLettersFrm").validate().element("#plateNo")
					&& $("#nocAndLettersFrm").validate().element("#carOwner")
					&& $("#nocAndLettersFrm").validate().element("#carType")
					&& $("#nocAndLettersFrm").validate().element("#carColor")
					&& $("#nocAndLettersFrm").validate().element("#machineNo")
					&& $("#nocAndLettersFrm").validate().element("#shasyNo")
					&& $("#nocAndLettersFrm").validate().element("#carModel"));
		}
		
		return true;		
	}
	
	function validatePayment() {
		return ($("#nocAndLettersFrm").validate().element("#fnpServiceCode"));		
	}

	function updateSummaryTab() {
	
		if($.browser.msie && $.browser.version.substr(0,1)<7){
			$("#nocAndLettersFrm input[type=hidden]").each(function() {
	       		$('#Summary input#sum'+$(this).attr('id')).val($("#cuselFrame-"+$(this).attr('id')+" .cuselText").html());
	       		$('#Summary input#sum'+$(this).attr('id')).attr('disabled', true);
	    	});
		}
		
		$("#nocAndLettersFrm input[type=text]").each(function() {
			$('#Summary input#sum' + $(this).attr('id')).val(this.value);
			$('#Summary input#sum' + $(this).attr('id')).attr('disabled', true);
		});

		$("#nocAndLettersFrm select").each(
				function() {
					$('#Summary input#sum' + $(this).attr('id')).val(
							$(
									'#nocAndLettersFrm select#'
											+ $(this).attr('id')
											+ ' option:selected').text());
					$('#Summary input#sum' + $(this).attr('id')).attr('disabled',
							true);
		});
		
		$("#nocAndLettersFrm input[type=file]").each(function() {

			$('#Summary input#sum' + $(this).attr('id')).val(this.value);
			$('#Summary input#sum' + $(this).attr('id')).attr('disabled', true);

		});
		
		$("#nocAndLettersFrm textarea").each(
				function() {
					$('#Summary textarea#sum' + $(this).attr('id')).val(
							$(this).val());
					$('#Summary textarea#sum' + $(this).attr('id')).attr(
							'disabled', true);

		});

		<c:if test="${isCompanyAdmin}">
			$('#fnpServiceCode').rules("add", {
				required : {
					depends: function(element) {
				           return submAction == "submit";
				        }
					}
			});
		</c:if>

	}
	
	function handler() {
		$.fancybox.close();
	}
	
	jQuery(document).ready(
			function() {
				EmployeeSelectGrid.init("listemployee", "pager", handler);
				EmployeeSelectGrid.defineFieldMapping("empId",
						"EMPLOYEE ID", "employeeId", true);
				EmployeeSelectGrid.defineFieldMapping("empNationality",
						"EMPLOYEE NATIONALITY", "employeeNationality", true);
				EmployeeSelectGrid.defineFieldMapping("empCECNo",
						"EMPLOYEE CEC NO", "employeeCecNumber", true);
				
				EmployeeSelectGrid.defineFieldMapping("empNameEn",
						"EMPLOYEE Name EN", "employeeNameEng", true);
				EmployeeSelectGrid.defineFieldMapping("empNameAr",
						"EMPLOYEE Name AR", "employeeNameArab", true);

				EmployeeAutoFiller.init("employeeId");
				EmployeeAutoFiller.defineFieldMapping("empNameEn","employeeNameEng");
				EmployeeAutoFiller.defineFieldMapping("empNameAr","employeeNameArab");
				EmployeeAutoFiller.defineFieldMapping("empNationality","employeeNationality");
				
				EmployeeAutoFiller.defineFieldMapping("empCECNo","employeeCecNumber");
				
				EmployeeAutoFiller.fillFields();
			});
	
	function openInGrid() {
		$
				.fancybox('<div id="gridWrapperCont" style="width:600px;"><div id="TasksGrid"><table id="listemployee"></table><div id="pager"></div></div></div>');
		EmployeeSelectGrid.drawGrid();
	}
	
	function cancelForm(divId){
		fancyConfirm('<spring:message code="message.cancel_confirmation_message" />'
				,'<spring:message code="button.No" />'
				,'<spring:message code="button.yes" />'
				, function(ret) {
					if(ret == true){
						//cancel
						cancelProcess('${appId}');
					}
		});
	}
</script>
